<template>
  <div>
   <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡牌-->
     <el-card>
        <el-row :gutter="20">
        <el-col :span="8">
        <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList">
           <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
        </el-input></el-col>
        <el-col :span="4">
         <el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>
        </el-col>
     </el-row>

       <el-table :data="userList" border stripe>
        <el-table-column type="index"></el-table-column>
         <el-table-column label='姓名' prop="username"></el-table-column>
         <el-table-column label='邮箱' prop="email"></el-table-column>
         <el-table-column label='电话' prop="mobile"></el-table-column>
        <el-table-column label='角色' prop="role_name"></el-table-column>
         <el-table-column label='状态'>
          <template slot-scope="scope">
             <el-switch
                v-model="scope.row.mg_state"
                @change="userStateChange(scope.row)"
               >
              </el-switch>
          </template>
          </el-table-column>
          <el-table-column label='操作' >
           <template slot-scope="scope">
              <!--修改按钮-->
            <el-button type="primary" icon="el-icon-edit" @click="showEdditDialog(scope.row.id)"></el-button>
                 <!--删除按钮-->
            <el-button type="danger" icon="el-icon-delete" @click="removeUserByid(scope.row.id)"></el-button>
        
               <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
                      <el-button type="warning" icon="el-icon-setting"></el-button>
                </el-tooltip>
           </template>
          </el-table-column>
       </el-table>
         <!--分液器-->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
      </el-pagination>
     </el-card>
          <!--添加用户对话框-->
    <el-dialog
      title="添加用户"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClosed" >
     <el-form :model="addForm" :rules="addFormRules" ref="AddFormRef" label-width="70px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
         <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
         <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
         <el-form-item label="手机" prop="mobile">
          <el-input v-model="addForm.mobile"></el-input>
        </el-form-item>
     </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>


 <!--修改用户对话框-->
    <el-dialog
      title="修改用户对话框"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed">
     <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
        <el-form-item label="用户名">
          <el-input v-model="editForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email" ></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="editForm.mobile"></el-input>
        </el-form-item>
     </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click='editUserInfo'>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
<script>
export default {
  data() {
    // 验证邮箱的规则
    var checkEmail=(rule,value,cb)=>{
        //验证邮箱的正则
       const regEmail=/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
       if(regEmail.test(value)){
        //  合法邮箱
          return cb()
       }
       cb(new Error('请输入合法的邮箱'))
    }
     // 验证手机号的规则
    var checkMobile=(rule,value,cb)=>{
      // 验证手机号的正则表达式
    const regMobile=/^[1][3,4,5,7,8][0-9]{9}$/
      if(regMobile.test(value)){
        //  合法邮箱
          return cb()
       }
         cb(new Error('请输入合法的手机号!'))
    }
      return {
        //   获取用户列表的参数对象
        queryInfo:{
            query:'',
            // 当前的页数
            pagenum:1,
            // 当前每页显示多少条数据
            pagesize:2
        },
        userList:[],
        total:0,
        // 对话框显示隐藏
        addDialogVisible:false,
        // 添加用户的表单数据
        addForm:{
          username:'',
          password:'',
          email:'',
          mobile:''
        },
        // 添加表单的验证规则
        addFormRules:{
          username:[
            {required:true,message:'请输入用户名',trigger:'blur'},
            {min:3,max:10,message:'用户名的长度在3到10个字符之间',trigger:'blur' }
          ],
          password:[
            {required:true,message:'请输入密码',trigger:'blur'},
            {min:6,max:15,message:'密码的长度在6到15个字符之间',trigger:'blur' }
          ],
          email:[
            {required:true,message:'请输入邮箱',trigger:'blur'},
            {validator:checkEmail,trigger:'blur'},
          ],
          mobile:[
             {required:true,message:'请输入手机号',trigger:'blur'},
             {validator:checkMobile,trigger:'blur'},
          ]
        },
        // 控制修改对话框的显示影藏
        editDialogVisible:false,
        // 查询到的信息用户对象
        editForm:{},
        // 修改表单的验证规则
        editFormRules:{
           email:[
             {required: true, message:'请输入用户邮箱', trigger: 'blur'},
             {validator:checkEmail, trigger: 'blur'}
            ],
            mobile:[
              {required: true, message:'请输入用户手机', trigger: 'blur'},
              {validator:checkMobile, trigger: 'blur'}
            ]
        }
      }
  },

  created(){
   this.getUserList()
  },

  methods: {
    // 获取用户列表
     async getUserList(){
   const { data:res }=  await this.$http.get('users',{ params:this.queryInfo }) 
      if(res.meta.status!==200) {
           return this.$message.error('获取用户列表失败')
      }
      // console.log(res);
      this.userList=res.data.users
      this.total=res.data.total
  },
  // 监听pagesize改变的事件
  handleSizeChange(newSize){
        console.log(newSize);
          this.queryInfo.pagesize=newSize
          this.getUserList() 
  },
  // 监听页码值改变的事件
  handleCurrentChange(newPage){
       this.queryInfo.pagenum=newPage
          this.getUserList()
  },
  // 监听switch开关的改变
  async userStateChange(userinfo){
    console.log(userinfo);
   const {data:res}= await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
   if(res.meta.status !==200){
     userinfo.mg_state=!userinfo.mg_state
     return this.$message.error('更新用户状态失败')
   }
   this.$message.success('更新用户状态成功！')
  },
  // 监听添加用户对话框的关闭事件
  addDialogClosed(){
    this.$refs.AddFormRef.resetFields()
  },
  // 点击按钮，添加新用户
  addUser(){
         this.$refs.AddFormRef.validate(async valid=>{
            if(!valid)return
            // 可以发起添加用户的网络请求
      const {data:res} =  await this.$http.post('users',this.addForm)
      if(res.meta.status !==201){
        this.$message.error('添加用户失败')
      }
      this.$message.success('添加用户成功')
      // 隐藏添加用户的对话框
      this.addDialogVisible=false
      // 重新获取用户列表
      this.getUserList()
         })
  },
  // 展示编辑用户的对话框
  async showEdditDialog(id){
  const{ data: res}= await this.$http.get('users/'+id)
     if(res.meta.status !==200){
          return this.$message.error('查询用户信息失败')
     } 
     this.editForm=res.data
   this.editDialogVisible=true
  },
  // 监听修改用户对话框的关闭事件
  editDialogClosed(){
    this.$refs.editFormRef.resetFields()
  },
  // 修改用户信息并提交
  editUserInfo(){
      this.$refs.editFormRef.validate(async valid=>{
        if (!valid) return
         // 发起修改用户的数据请求
       const{data:res}= await this.$http.put('users/'+this.editForm.id,
            {email:this.editForm.email,
            mobile:this.editForm.mobile}
        )
         if(res.meta.status !==200){
          return this.$message.error('更新用户信息失败')
       } 
      //  隐藏对话框
      this.editDialogVisible=false
      // 刷新数据列表
      this.getUserList()
      // 提示修改成功
      this.$message.success('更新用户信息成功！')
      })
  },
  // 根据id删除对应的信息
 async removeUserByid(id){
   
    // 弹框 问下有没有是否删除
  const confirmResult= await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>{
          return err
        })
        // 如果确认删除 ，返回confirm
        // 如果取消删除  返回 cancel 
    if(confirmResult!=='confirm'){
        return this.$message.info('已取消删除')
    }
     const{ data : res} = await this.$http.delete('users/'+id)
      if(res.meta.status !==200){
          return this.$message.error('删除用户失败')
       } 
        this.$message.success('删除用户成功！')
        this.getUserList()
  }
}

}
</script>

<style>

</style>